<template>
  <div class="page">
		<van-nav-bar
			:fixed="true" 
			:placeholder="true"
			:border="false"
			:title="title"
			class="bar"
		>
			<template #right>
				<van-icon @click="$router.togo('/setting')" name="setting-o" class="tab_icon" />
			</template>
		</van-nav-bar>
		<!-- 内容部分 -->
		<div class="content">
			<div class="nav">
				<div class="user">
					<img :src="require('../assets/images/' + user_info.img)" alt="">
					<div class="name">
						<div>{{user_info.name}}</div>
						<div>ID: {{user_info.u_id}}</div>
					</div>
				</div>
				<div class="addr">
					<div class="is_addr" v-if="user_info.address.id">
						<div class="l">
							<van-icon class="icon" name="location-o" />
						</div>
						<div class="c">
							<div class="t">
								<span class="addr_user">收件人：{{user_info.address.name}}</span>
								<span class="tel">电话：{{user_info.address.tel}}</span>
							</div>
							<div class="b">收货地址：{{user_info.address.address}}</div>
						</div>
						<div class="r" @click="$router.togo('/address')">
							<van-icon class="icon" name="edit" /> <span>编辑</span>
						</div>						
					</div>
					<div class="no_addr" v-else @click="$router.togo('/address')">
						<van-icon class="icon" name="plus" />
						<span>添加收货地址</span>
					</div>
				</div>
			</div>
			
			<div class="order_list">
				<van-cell :clickable="true" center title="我的订单" @click="$router.togo('/order')" is-link value="全部订单" />
				<div class="order_item">
					<ul>
						<li>
							<van-icon class="icon" name="todo-list-o" />
							<span>待付款</span>
						</li>
						<li>
							<van-icon class="icon" name="logistics" />
							<span>待发货</span>
						</li>
						<li>
							<van-icon class="icon" name="sign" />
							<span>待收货</span>
						</li>
						<li>
							<van-icon class="icon" name="records" />
							<span>待评价</span>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="item_list">
				<van-cell title="我的优惠券" @click="$router.togo('/coupon')" icon="coupon" is-link />
				<van-cell title="联系我们" icon="phone" value-class="c999" @click="tel" value="0755-666888" is-link />
				<van-cell title="意见反馈" @click="$router.togo('/feedback')" icon="comment" value-class="c999" value="让我们更好" is-link />
			</div>
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			title: '个人中心',
			user_info: {
				u_id: '520',
				name: 'YanGo',
				img: 'user.png',
				address: {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
					status: 1,
        },
			}
    }
  },
  computed: {

  },
  methods: {
		tel(e){
			location.href = 'tel:0755-666888'
		}
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
@import '~styles/theme';
	.page{
		.tab_icon{
			color: #fff;
			font-size: 20px;
		}
	}
	.page::v-deep .van-nav-bar{
		background-color: $theme_color;
	}
	/deep/ .van-nav-bar__title{
		color: #fff;
	}
	/deep/ .van-cell__title{
		text-align: left;
	}
	.content{
		.nav{
			background-color: #fff;
			margin-bottom: 12px;
			.user{
				background-color: $theme_color;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 23px;
				img{
					width: 70px;
					height: 70px;
					object-fit: cover;
					display: block;
					margin-right: 16px;
				}
				.name{
					div{
						text-align: left;
						color: #fff;
						&:nth-child(1){
							font-size: 20px;
							font-weight: bold;
							margin-bottom: 10px;
						}
						&:nth-last-child(1){
							opacity: .6;
							font-size: 12px;
						}
					}
				}
			}
			.addr{
				padding: 12px;
				.is_addr{
					display: flex;
					justify-content: space-between;
					align-items: flex-start;					
				}
				.l{
					.icon{
						margin-top: 3px;
						font-size: 18px;
					}
				}
				.c{
					padding: 0 10px;
					text-align: left;
					.t{
						margin-bottom: 6px;
						span{
							&:nth-child(1){
								margin-right: 10px;
							}
						}
					}
					.b{
						color: #999;
						font-size: 12px;
					}
				}
				.r{
					text-align: left;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.icon{
						font-size: 22px;
						color: $theme_color;
					}
					span{
						margin-left: 8px;
						display: block;
						width: 30px;
						color: $theme_color;
					}
				}
			}
			.no_addr{
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				padding: 4px 0;
				.icon{
					color: #666;
					font-size: 18px;
					margin-right: 6px;
				}
				span{
					color: #666;
				}
			}
		}
		.order_list{
			background-color: #fff;
			margin-bottom: 12px;
			ul{
				padding: 12px 16px;
				display: flex;
				justify-content: space-between;
				li{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.icon{
						font-size: 22px;
						color: $theme_color;
						margin-bottom: 8px;
					}
				}
			}
		}
		.item_list{
			.van-cell__left-icon{
				font-size: 18px;
				color: $theme_color;
				margin-right: 10px;
			}
			.c999{
				span{
					color: #999;
					font-size: 12px;
				}
			}
		}
	}
</style>
